<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body id="output">
<script>
    /*
       1.  事件
           touchstart:手指放到屏幕上时触发(即使有一个手指已经放在了屏幕上)。
           touchmove:手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止
           touchend:手指从屏幕上移开时触发。
           touchcancel:系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪。
     */

    /*
        属性
         touches:Touch 对象的数组，表示当前屏幕上的每个触点。
         targetTouches:Touch 对象的数组，表示特定于事件目标的触点。
         changedTouches:Touch 对象的数组，表示自上次用户动作之后变化的触点。 每个 Touch 对象都包含下列属性。
         clientX:触点在视口中的 x 坐标。
         clientY:触点在视口中的 y 坐标。
         identifier:触点 ID。
         pageX:触点在页面上的 x 坐标。
         pageY:触点在页面上的 y 坐标。
         screenX:触点在屏幕上的 x 坐标。
         screenY:触点在屏幕上的 y 坐标。
         target:触摸事件的事件目标。
     */

    document.addEventListener('touchstart', (e) => {
        const {touches} = e
        console.log('touchstart', Math.floor(touches[0].clientX), Math.floor(touches[0].clientY))
    })
    
    
    /*
        2. 手势事件
             gesturestart:一个手指已经放在屏幕上，再把另一个手指放到屏幕上时触发。
             gesturechange:任何一个手指在屏幕上的位置发生变化时触发。
             gestureend:其中一个手指离开屏幕时触发。
     */

</script>
</body>
</html>